<template>
  <div>
    <!-- <template-b>
      <template slot="header">
        <h3> {{ header }} </h3>
      </template>
      <p> {{ main }} </p>
      <p> this is main second partment </p>
      <template slot="footer">
        <h3> {{ footer }} </h3>
      </template>
    </template-b> -->

    <template-b>
      <template v-slot="{slotScope: user}">
        <h3> {{ user.name }} </h3>
      </template>
      <template v-slot:default>
        <p> {{ main }} </p>
        <p> this is main second partment </p>
      </template>
      <template v-slot:footer>
        <h3> {{ footer }} </h3>
      </template>
    </template-b>
  </div>
</template>

<script>
import TemplateB from './templateB.vue'
export default {
  data () {
    return {
      header: "This is header",
      main: "This is main",
      footer: "This is footer"
    }
  },
  components: {
    TemplateB
  }
}
</script>

<style lang="stylus" scoped>

</style>
